<template>
    <div class="top">
        <div class="bx">
            <span class="cancel" @click="fun">取消</span>
            <div class="search">
                <input type="text" placeholder="搜游戏/直播/频道">
                <span></span>
            </div>
            <div class="button">搜索</div>
        </div>
    </div>
</template>

<script>
export default {
    name:"SearchTop",
    methods:{
      fun(){
        this.$router.push('/')
      }
    }
}
</script>

<style scoped>
.top {
  box-sizing: border-box;
  width: 100vw;
  height: 13.33333333vw;
  border-bottom: 0.13333333vw solid #dedede;
}
.top .bx {
  width: 94.13333333vw;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top .bx .cancel {
  font-size: 3.73333333vw;
  color: #f18d00;
}
.top .bx .search {
  width: 68.26666667vw;
  height: 8.66666667vw;
  border-radius: 3.33333333vw;
  border: 0.13333333vw solid #ececec;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top .bx .search input {
  width: 41.33333333vw;
  height: 100%;
  margin-left: 4vw;
}
.top .bx .search input::-webkit-input-placeholder {
  color: #75757e;
  font-size: 4.26666667vw;
}
.top .bx .search span {
  margin-right: 2.4vw;
  width: 4.26666667vw;
  height: 4.26666667vw;
  background: url(https://ssr-static.msstatic.com/h5/mobile/@public-online/imgs/search/s-close.b86785b357132bea5d26fdd3d814abda.png) no-repeat center / 100%;
}
.top .bx .button {
  width: 14.13333333vw;
  height: 8vw;
  line-height: 8vw;
  text-align: center;
  font-size: 3.73333333vw;
  color: #fffaf8;
  border-radius: 3.46666667vw;
  background: #f29511;
}

</style>